<template>
  <div class="bkg">
    <br/>
    <h2 class="h2">{{props.title}}</h2>
    <!--<template class="tips" v-if="stateList.length==0">
        <h2 class="h2">什么都没呢~</h2>
    </template> -->
    <div class="content">
      <div class="node-wrapper" >
        <div class="node" v-for="item in stateList" :key="item.tag" >
          <div class="left">
            <div class="icon" v-text="fUpperCase(item.name)"></div>
          </div>
          <div class="right">
            <div class="title" v-text="item.name"></div>
            <div class="tag" v-text="item.tag"></div>
            <div class="port" v-text="item.port"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { computed } from "@vue/reactivity";
import { onBeforeMount, onMounted, ref } from "@vue/runtime-core";
import axios from "axios";



let stateList = ref(null);
const refresh = () => {
  axios.get("http://lzfblog.cn:8000/status").then((res) => {
    stateList.value = res.data;
  });
};

const props = defineProps({
  title:{
    type:String,
    default:"微服务列表"
  }
})


onBeforeMount(() => {
  refresh();
});


const fUpperCase = computed(()=>(str)=>{
  return str[0].toUpperCase();
})


// 15s 刷新一次服务
setInterval(() => {
  refresh();
}, 15 * 1000);
</script>


<style scoped>
.bkg {
  width: 100%;
  min-height: 100vh;
  /* background-color: blueviolet; */
  background-color: #6d7cf1;
  /* position: absolute; */
  top: 0;
  left: 0;
}

.node-wrapper {
  display: flex;
  flex-wrap: wrap;
  /* border: 1px solid red; */
  margin: 0 auto;
  /* justify-content: ; */
  max-width: 610px;
}

  @media screen  and (max-width: 580px){
    .node{
      flex:1;
    }
  }
.node {
  /* width: 300px; */
  width: 260px;
  display: flex;
  border-radius: 15px 30px;
  background-color: white;
  padding: 20px 10px;
  margin: 15px;
  box-shadow: 3px 3px 3px 5px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

.h2 {
  font-size: 30px;
  color: white;
  text-align: center;
}
.node .title {
  font-size: 25px;
  font-weight: bolder;
}
.node .tag {
  color: #777;
  display: none;
}
.node .port {
  color: #bbb;
  font-weight: bolder;
  font-size: 18px;
}

.left {
  display: flex;
  align-items: center;
}
.left .icon {
  text-align: center;
  font-size: 40px;
  width: 50px;
  height:50px;
  line-height:50px;
  color: white;
  border-radius: 50%;
  margin-right: 20px;
  margin-left: 10px;
  background: #6d7cf1;
  padding: 0 8px;
  box-sizing: border-box;
  transform: scale(1.25);
}
</style> 